import useUserInfoStore from '@/store/useUserInfo';
import { clearLocalStorage } from '@/utils/utils';
import { Dropdown, Avatar as AntdAvatar } from 'antd';
import { memo } from 'react';
import { useNavigate } from 'react-router-dom';
import { useShallow } from 'zustand/shallow';

const Avatar = () => {
  const navigate = useNavigate();
  const { userInfo, setUserInfo, setToken } = useUserInfoStore(
    useShallow((state) => ({
      userInfo: state.userInfo,
      setUserInfo: state.setUserInfo,
      setToken: state.setToken,
    }))
  );
  return (
    <Dropdown
      menu={{
        items: [
          {
            label: '个人中心',
            key: 'personalCenter',
            onClick: () => {
              navigate('/individualCenter');
            },
          },
          {
            label: '退出',
            key: 'logout',
            onClick: () => {
              clearLocalStorage();
              setUserInfo({});
              setToken('');
              navigate('/login');
            },
          },
        ],
      }}
    >
      <div className="flex-center gap-2 cursor-pointer">
        <AntdAvatar src={userInfo.avatar} />
        <span>{userInfo.username}</span>
      </div>
    </Dropdown>
  );
};

export default memo(Avatar);
